<template>
  <span v-show="isShow">
    <slot></slot>
  </span>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "Auth",
  props: {
    auth: {
        type: String,
        required: true
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    ...mapState(["permissionList"])
  },
  methods: {
    validateThisButtonShow() {
      this.validateByAuthName(this.permissionList);
    },
    
    validateByAuthName(list) {
      // if (list == null || list.length <= 0) {
      //   this.isShow = false;
      // }
      for (var i = 0; i < list.length; i++) {
        console.info(list[i].permissionName === this.auth);
        if (list[i].permissionName === this.auth) {
          this.isShow = true
          return;
        } else {
          this.validateByAuthName(list[i].childs);
        }
      }
    }
  },
  created () {
    this.validateThisButtonShow()
  }
};
</script>

<style lang="stylus" scoped>
    i {
        font-size 16px
    }
</style>

